import React, { useEffect } from 'react';
import { Table, Button, Tag, Popconfirm, message } from 'antd';
import moment from 'moment';
import { useSet } from '@/utils/hooks';
import { getWhiteList, deleteWhiteList } from '@/services/whiteList';

const WhiteList = () => {
  const [state, setState] = useSet({
    loading: false,
    dataSource: [],
    total: 0,
    pageNum: 1,
    pageSize: 10,
  });

  const { loading, dataSource, total, pageNum, pageSize } = state;

  // 获取白名单列表
  const getWhiteListData = (params?:any) => {
    if (loading) return;
    setState({ loading: true });
    getWhiteList({
      pageNum,
      pageSize,
     ...params,
  })
      .then((res) => {
        if (res) {
          setState({
            dataSource: res.rows,
            total: res.total,
          });
        }
      })
      .catch((err) => {
        console.log(err, 'err');
      })
      .finally(() => {
        setState({ loading: false });
      });
  };

  useEffect(() => {
    getWhiteListData();
  }, []);

  const columns: any = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '设备ID',
      dataIndex: 'deviceId',
      key: 'deviceId',
    },
    {
      title: '脚本ID',
      dataIndex: 'scriptId',
      key: 'scriptId',
    },
    {
      title: '激活码',
      dataIndex: 'activationCode',
      key: 'activationCode',
    },
    {
      title: '状态',
      dataIndex: 'dataStatus',
      key: 'dataStatus',
      render: (text: number) =>
        text === 1 ? <Tag color="success">启用</Tag> : <Tag color="error">禁用</Tag>,
    },
    {
      title: '创建时间',
      dataIndex: 'gmtCreate',
      key: 'gmtCreate',
      render: (text: number) => text && moment(text).format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      title: '修改时间',
      dataIndex: 'gmtModifed',
      key: 'gmtModifed',
      render: (text: number) => text && moment(text).format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      title: '过期时间',
      dataIndex: 'expireTime',
      key: 'expireTime',
      render: (text: number) => text && moment(text).format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      title: '操作',
      key: 'operation',
      fixed: 'right',
      render: (record: any) => (
        <Popconfirm
          title="确认删除该白名单吗？"
          onConfirm={() => {
            deleteWhiteList(record?.deviceId).then(() => {
              message.success('删除成功');
              getWhiteListData();
            });
          }}
        >
          <Button type="link" size="small">
            删除
          </Button>
        </Popconfirm>
      ),
    },
  ];

  return (
    <div>
      <Table
        size="small"
        loading={loading}
        columns={columns}
        dataSource={dataSource}
        pagination={{
          showQuickJumper: true,
          showSizeChanger: true,
          total,
          showTotal: (total) => `共 ${total} 条数据`,
          current: pageNum,
          pageSize,
          onChange: (page, pageSize) => {
            setState({ pageNum: page, pageSize });
            getWhiteListData({
                pageNum: page,
                pageSize,
            });
          },
        }}
        scroll={{ x: 'max-content' }}
      />
    </div>
  );
};

export default WhiteList;
